<template>
  <div class="teacher_follow">
    <div
      class="tf_list"
      v-if="teacher_follow.length>0"
      v-for="(item,index) in teacher_follow"
      :key='index'
      @click="teacher_follow_click(item.lecturer_id)"
    >
     <div class="tf_avatar">
        <img
          :src="item.img"
          alt=""
        >
      </div>
      <div class="tf_name">
        <div>{{item.name}}</div>
        <div>{{item.count}}人关注</div>
        <img
          @click.stop="tf_close(index)"
          src="https://o6wndwjxn.qnssl.com/Moreandmore.svg"
          alt=""
        >
      </div>
      <div
        class="tf_close"
        :style="'width:'+ item.status +'px'"
        @click.stop="tf_cancel(item.lecturer_id)"
      >
          取消关注
      </div>
    </div>
    <!-- <div
      class="co_kong"
      v-if="teacher_follow.length == 0"
    >
      <kong :type='co_kong'></kong>
    </div> -->
  </div>
</template>

<script>
import kong from '@/components/public/kong.vue'
import {
  user_follow,
  follow_lecturer
} from '@/api/center'
import {
  mapState
} from 'vuex'
export default {
  components: {
    kong
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      teacher_follow: [],
      co_kong: '关注讲师'
    }
  },
  created () {
    this.getTeacher()
  },
  methods: {
    getTeacher () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        page: 1,
        pageshow: 100000
      }
      user_follow(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        // console.log('用户关注列表',res)
        let { code, data } = res.data
        if (code == 200) {
          for (var i = 0; i < data.length; i++) {
            data[i].status = 0
          }
          this.teacher_follow = data
        } else {
          this.teacher_follow = []
        }
      })
    },
    teacher_follow_click (e) {
      this.$router.push({
        path: '/teacher',
        query: {
          lecturer_id: e
        }
      })
    },
    tf_close (e) {
      if (this.teacher_follow[e].status == 90) {
        for (var i = 0; i < this.teacher_follow.length; i++) {
          this.teacher_follow[i].status = 0
        }
      } else {
        for (var i = 0; i < this.teacher_follow.length; i++) {
          this.teacher_follow[i].status = 0
        }
        this.teacher_follow[e].status = 90
      }
    },
    tf_cancel (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        lecturer_id: e
      }
      follow_lecturer(requery).then(res => {
        let { code } = res.data
        if (code == 200) {
          this.getTeacher()
        }
      })
    }
  }
}
</script>

<style>
.teacher_follow {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.tf_list {
  width: 100%;
  height: 90px;
  border-bottom: #eeeeee 1px solid;
  display: flex;
  overflow: hidden;
}
.tf_avatar {
  width: 80px;
}
.tf_avatar > img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  /* border: 1px solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  margin: 15px;
}
.tf_name {
  flex: 1;
  position: relative;
  padding-left: 8px;
}
.tf_name > div:nth-child(1) {
  height: 55px;
  line-height: 70px;
  font-size: 15px;
  color: #535353;
  font-weight: bold;
}
.tf_name > div:nth-child(2) {
  font-size: 12px;
  color: #999999;
}
.tf_name > img {
  position: absolute;
  right: 10px;
  top: 0;
  width: 40px;
  height: 90px;
}
.tf_close {
  background: #d8d8d8;
  color: white;
  text-align: center;
  line-height: calc(100vw * 180 / 750);
  transition: all 0.5s;
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 24 / 750);
  color: #ffffff;
  height: 100%;
  position: relative;
}
</style>
